//角色管理
import { Button, message, Modal, Space, Table, Tag } from 'antd'
import { useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { delRole, getRoleList } from '@/store/actions/roleManagement'
import styles from './RoleManagement.module.scss'
import EditRole from '@/components/EditRole/EditRole'
import Grant from '@/components/Grant/Grant'
import http from '@/utils/http'

const RoleManagement = () => {
  const dispatch = useDispatch()
  useEffect(() => {
    dispatch(getRoleList({ page: 1, pagesize: 10 }))
  }, [])

  //用来控制新增和编辑模态框的显示和隐藏
  const [editOpen, setEditOpen] = useState(false)
  //用来控制模态框是新增/编辑状态
  const [isEdit, setIsEdit] = useState(false)
  //用来控制分配权限模态框显示和隐藏
  const [isGrantOpen, setIsGrantOpen] = useState(false)

  //编辑角色
  const editRole = (text) => {
    setIsEdit(text)
    setEditOpen(true)
  }

  //分配权限
  const grant = (text) => {
    // console.log(text)
    // setIsGrantOpen(true)
    // http.get('/sys/role/604e2aeb488be61b90b68776').then((res) => {
    //   console.log(res)
    // })
  }

  //删除
  const delRoleItem = (id) => {
    Modal.confirm({
      content: '确定删除该角色吗？',
      onOk: (close) => {
        const del = async () => {
          await dispatch(delRole(id))
          close()
          dispatch(getRoleList({ page: 1, pagesize: 10 }))
          message.success('操作成功')
        }
        del()
      },
    })
    console.log(id)
  }
  const columns = [
    {
      title: '序号',
      key: 'index',
      render: (text, record, index) => index + 1,
      width: '120px',
    },
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
      width: '240px',
    },
    {
      title: '描述',
      dataIndex: 'description',
      key: 'description',
      width: '566px',
    },
    {
      title: '操作',
      key: 'action',
      render: (text) => (
        <Space size="middle">
          <Button
            className="green"
            onClick={() => {
              grant(text)
            }}
          >
            分配权限
          </Button>
          <Button
            className="blue"
            onClick={() => {
              editRole(text)
            }}
          >
            编辑
          </Button>
          <Button
            className="red"
            onClick={() => {
              delRoleItem(text.id)
            }}
          >
            删除
          </Button>
        </Space>
      ),
    },
  ]

  const data = useSelector((state) => state.roleManagement)

  const paginationChange = (page, pagesize) => {
    const data = { page, pagesize }
    dispatch(getRoleList(data))
  }

  //新增角色按钮
  const addRole = () => {
    setIsEdit(false)
    setEditOpen(true)
  }
  return (
    <div className={styles.root}>
      <Button type="primary" onClick={addRole}>
        新增角色
      </Button>
      <Table
        style={{ marginTop: 20 }}
        columns={columns}
        dataSource={data.rows}
        rowKey={'id'}
        bordered
        rowClassName="rol"
        size="middle"
        pagination={{
          position: ['bottomCenter'],
          total: data.total,
          size: 'default',
          onChange: paginationChange,
          current: data.page,
        }}
      />

      <EditRole
        editOpen={editOpen}
        setEditOpen={setEditOpen}
        isEdit={isEdit}
        setIsEdit={setIsEdit}
      />
      <Grant isGrantOpen={isGrantOpen} setIsGrantOpen={setIsGrantOpen} />
    </div>
  )
}

export default RoleManagement
